<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const jobList = ref([
  {
    title: 'Java开发岗',
    company: '旺旺公司',
    location: '湖南省衡阳市蒸湘区',
    salaryMin: '80,000元',
    salaryMax: '120,000元',
    requirements: '三年以上开发经验',
    id: '1',
    publishTime: '2021-08-01'
  }
])
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span class="header-title">招聘信息</span>
        <router-link to="/boss/postjob">
          <el-button type="success">我也要招聘</el-button>
        </router-link>
      </div>
    </template>
    <el-form inline>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="职业类别" class="vertical-center">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="请选择"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-input
              v-model="input1"
              class="w-50 m-2"
              size="large"
              placeholder="搜索职位、公司"
              :suffix-icon="Search"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="排序方式">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="最新发布"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" :icon="Search" circle />

            <el-button type="info" plain>重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card class="job-card" v-for="item in jobList" :key="item.id">
      <el-row :gutter="20">
        <el-col :span="15">
          <h2 class="job-title">{{ item.title }}</h2>
          <p class="job-requirements">{{ item.requirements }}</p>
          <el-tag>{{ item.salaryMin }} - {{ item.salaryMax }}</el-tag>
        </el-col>
        <el-col :span="6">
          <p class="job-company">{{ item.company }}</p>

          <p class="job-location">{{ item.location }}</p>
          <p class="job-publish-time">{{ item.publishTime }}</p>
        </el-col>
      </el-row>
    </el-card>
    <template #footer>
      <el-pagination
        :page-size="20"
        :pager-count="11"
        layout="prev, pager, next"
        :total="1000"
        style="justify-content: center; margin-bottom: -25px"
      />
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.header-title {
  font-size: 28px;
  font-weight: bold;
  color: rgb(36, 74, 161);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.job-card {
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid #03786e;
}
.job-company,
.job-title {
  font-size: 20px;
  font-weight: bold;
}
.job-company,
.job-location,
.job-publish-time,
.job-requirements {
  margin-top: 10px;
}
.box-card {
  margin-top: 20px;
  margin-left: 150px;
  margin-right: 150px;
  padding: 30px;
}
</style>
